@charset 'utf-8';
@import '../../../assets/scss/usage/layout/reset.scss';
@import '../../../assets/scss/usage/layout/common.scss';
@import '../../../assets/fonts/iconfont.css';
$green: #2dce8f;
$tgray: #5a5e5c;
$background: #f5f5f5;
$itemLw: 28%;
$itemConw: 60%;
$bradius: 5px;
$fz12: 12px;
$fz13: 13px;
$fz14: 14px;
$fz16: 16px;
$border: 1px solid #e3e3e3;
html
{
    background-color: #f5f5f5;
}
.iconfont
{
    font-family: 'iconfont' !important;
    font-style: normal;

    @include font-size($fz16);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.initialize
{
    vertical-align: middle;

    border: 0 none;
    background: none;
}
.item
{
    line-height: 20px;

    position: relative;

    padding: 10px 15px;

    color: $tgray;
}
.prodetail-head
{
    position: relative;

    overflow: hidden;

    width: 100%;
    margin-top: -20px;
    .text
    {
        position: absolute;
        right: 10px;
        bottom: 10px;

        color: #fff;

        @include font-size($fz14);
    }
}
.prodetail-head-ad
{
    width: 100%;
}
.green
{
    color: $green;
}
.prodetail-title
{
    padding: 20px;

    background-color: #fff;

    @include font-size($fz13);
    .big
    {
        color: #484c4a;

        @include font-size(19px);
    }
    .tips-list
    {
        padding: 4px 0 4px 15px;

        list-style-type: disc;
        li
        {
            padding: 5px 0;

            color: #5a5e5c;
        }
    }
}
.safe-title
{
    width: 90%;
    margin: 13px auto 0;
    padding: 13px 20px;

    color: #ff9b6c;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    background-color: #ffe4d6;

    @include font-size($fz16);
    @include border-radius($bradius);
}
.safe-type
{
    overflow: hidden;

    width: 88%;
    margin: 13px auto 0;
}
.safe-titem
{
    float: left;

    width: 31.33%;
    margin: 0 1%;

    text-align: center;

    color: #ff9b6c;
    .big
    {
        @include font-size(24px);
    }
    .tgreen
    {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        background-color: #ffe4d6;
    }
    .empty
    {
        height: 15px;

        border-top: 2px solid $background;
        background-color: $background;
    }
    .gray
    {
        padding-bottom: 10px;

        background-color: #ffe4d6;
    }
}
.safe-titem.cur
{
    .empty
    {
        border-top-color: $green;
        background-color: #fff;
    }
    .tgreen
    {
        color: $green;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        background-color: #fff;
    }
    .gray
    {
        color: #a8afac;
        background-color: #fff;
    }
}
.safe-detail
{
    padding: 10px 18px;

    border-bottom: $border;
    background-color: #fff;
    .detail
    {
        padding: 5px 0;

        color: #a8afac;

        @include font-size(13px);
        .fr
        {
            color: #484c4a;
        }
    }
    .green
    {
        @include font-size($fz13);
    }
}
.safe-list
{
    padding-left: 15px;

    background-color: #fff;
}
.safe-item
{
    padding: 14px 15px 12px 0;

    border-bottom: $border;

    @extend .item;
    .item-fr{
        width: 60%;
        text-align: right;
        float: right;
    }
    .fr:after,
    .item-fr:after
    {
        padding-left: 10px;

        content: '\e612';

        color: #e3e3e3;

        @include font-size($fz12);
        @extend .iconfont;
    }
    .select
    {
        @extend .initialize;
        width: 65%;
    }
    .input
    {
        text-align: right;

        @extend .initialize;
    }
    .buynum
    {
        float: right;
    }
    .buynum-button
    {
        line-height: 24px;

        display: inline-block;

        width: 25px;
        height: 25px;

        text-align: center;

        border: $border;

        @include border-radius(3px);
        .iconfont
        {
            color: #2dce8f;
        }
    }
    .buynum-add
    {
        line-height: 22px;
    }
    .buynum-input
    {
        height: 25px;
        .input
        {
            line-height: 22px;

            width: 40px;

            text-align: center;

            color: #000;
        }
    }
    .safe-item-left
    {
        float: left;

        width: $itemLw;

        text-align: left;
    }
    .safe-item-input
    {
        line-height: 20px;

        width: $itemConw;
        height: 20px;

        @extend .initialize;
    }
    .safe-item-select
    {
        line-height: 20px;

        width: $itemConw;

        @extend .initialize;
    }
}
.safe-item:last-child
{
    border-bottom: 0 none;
}
.item-title
{
    color: #a8afac;

    @extend .item;
    .iconfont
    {
        margin-right: 5px;

        vertical-align: middle;

        color: $green;
    }
}
.info-list
{
    border-top: $border;
    background-color: #fff;
}

.info-item
{
    border-bottom: $border;

    @extend .item;
    .iconfont
    {
        color: #e3e3e3;

        @include font-size(13px);
    }
}
.info-tips
{
    position: relative;

    margin: 10px 40px;
    padding-bottom: 80px;
    .info-check
    {
        position: absolute;
        top: -2px;
        left: -25px;

        width: 20px;
    }
}

/*复选同意框*/

.ui-checked
{
    line-height: 22px;

    position: absolute;
    z-index: 2;
    top: 0;
    left: -20px;

    width: 20px;
    height: 22px;

    vertical-align: sub;

    color: #fff;
    border: 0 ;
    outline: 0;
    background: 0 0;

    -webkit-appearance: none;
}

.ui-checked:before
{
    top: 0;
    left: 0;

    display: inline-block;

    width: 20px;
    height: 22px;

    content: '\e61f';
    cursor: pointer;

    @extend .iconfont;
}

.ui-checked:checked:before
{
    content: '\e618';

    color: #f60;
}
.footer
{
    line-height: 60px;

    position: fixed;
    bottom: 0;
    left: 0;

    overflow: hidden;

    width: 100%;
    height: 60px;

    text-align: center;

    border: $border;
    background-color: #fff;

    @include font-size(18px);
    .price
    {
        float: left;

        width: 40%;

        color: #f60;
        border-right: $border;

        @include font-size(21px);
    }
    .ask
    {
        float: left;

        width: 30%;

        color: $green;
        border-right: $border;
    }
    .button
    {
        float: left;

        width: 30%;

        color: #fff;
        background-color: $green;
    }
}
